<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>关于我们 - 中海创科技 - 海创EAP低代码工业互联网平台</title>
    <link rel="stylesheet" type="text/css" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/plugins/swiper/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="/css/common.css">
    <link rel="stylesheet" type="text/css" href="/css/aboutus.css">
    <script type="text/javascript" src="/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/plugins/superSlide.js"></script>
    <script type="text/javascript" src="/plugins/swiper/swiper.min.js"></script>
    <script src="/js/common.js"></script>
</head>

<body>
    <style>
    </style>
    <!-- 头部 -->
    <header class="hc-head">

    </header>
    <style>
        .hc_block1_item::after {
            background: url(/images/aboutus/block1-item-bg.png) no-repeat center/cover;
        }

        .hc_block2_bddocs {
            background: url(/images/aboutus/block2-docs-bg.png) no-repeat center/cover;
        }
    </style>
    <div class="hc-body">
        <!-- hc_banner -->
        <div class="hc-banner">
            <img src="/images/aboutus/banner.png" alt="">
            <div class="hc-baner-descbox">
                <div class="hc-baner-desc">
                    <h2 class="hc-baner-p1">海创EAP</h2>
                    <h4 class="hc-baner-p2"> 低代码开发平台</h4>
                    <p class="hc-baner-p3">
                        高性能多端开发技术，快速开发企业级应用程序， 100000+开发者使用EAP低代码开发平台， 提升企业 IT 架构的统一性、灵活性和可主控扩展能力,海创EAP不仅是技术,更多的是服务。
                    </p>
                </div>
            </div>
        </div>
        <div class="hc_merit">
            <ul class="hc_merit_list">
                <li class="hc_merit_item">
                    <div class="hc_merit_box">
                        <span class="hc_merit_num">20</span>
                        <span class="hc_merit_unit">年</span>
                    </div>
                    <p class="hc_merit_desc">经验沉淀</p>
                </li>
                <li class="hc_merit_item">
                    <div class="hc_merit_box">
                        <span class="hc_merit_num">1000000</span>
                        <span class="hc_merit_unit">+</span>
                    </div>
                    <p class="hc_merit_desc">平台代码行数已突破</p>
                </li>
                <li class="hc_merit_item">
                    <div class="hc_merit_box">
                        <span class="hc_merit_num">2000</span>
                        <span class="hc_merit_unit">+</span>
                    </div>
                    <p class="hc_merit_desc">应用模板数</p>
                </li>
                <li class="hc_merit_item">
                    <div class="hc_merit_box">
                        <span class="hc_merit_num">30000</span>
                        <span class="hc_merit_unit">+</span>
                    </div>
                    <p class="hc_merit_desc">赋能企业</p>
                </li>
            </ul>
        </div>
        <div class="hc_block1">
            <div class="hc_block_ctn">
                <h2 class="hc_block_title">选择海创EAP的六大理由</h2>
                <p class="hc_block_desc">面向工业企业提供端到端全流程应用构建解决方案，加速全场景行业数字化</p>
                <div class="hc_block1_main">
                    <ul class="row hc_block1_list">
                        <li class="col-md-4 col-xs-12 hc_block1_item">
                            <div class="hc_block1_docs">
                                <div class="hc_block1_iconlist">
                                    <img class="hc_block1_icon" src="/images/aboutus/block1-icon1.png" alt="">
                                    <img class="hc_block1_icon_on" src="/images/aboutus/block1-icon1-on.png" alt="">
                                </div>
                                <h4>降低应用开发门槛</h4>
                                <p>低代码开发模式，多终端适配，具备极低的学习成本，让业务人员可直接构建应用，人人都是开发者</p>
                            </div>
                        </li>
                        <li class="col-md-4 col-xs-12 hc_block1_item">
                            <div class="hc_block1_docs">
                                <div class="hc_block1_iconlist">
                                    <img class="hc_block1_icon" src="/images/aboutus/block1-icon2.png" alt="">
                                    <img class="hc_block1_icon_on" src="/images/aboutus/block1-icon2-on.png" alt="">
                                </div>
                                <h4>加速业务敏捷创新
                                </h4>
                                <p>拖拽式页面构建，简单易用的数据建模，积木式搭建应用效率提升10+倍，极大缩短了创新周期</p>
                            </div>
                        </li>
                        <li class="col-md-4 col-xs-12 hc_block1_item">
                            <div class="hc_block1_docs">
                                <div class="hc_block1_iconlist">
                                    <img class="hc_block1_icon" src="/images/aboutus/block1-icon3.png" alt="">
                                    <img class="hc_block1_icon_on" src="/images/aboutus/block1-icon3-on.png" alt="">
                                </div>
                                <h4>保护企业已有资产
                                </h4>
                                <p>全面开放，丰富的集成能力，支持原生容器服务接入，可快速复用并扩展既有资产</p>
                            </div>
                        </li>
                        <li class="col-md-4 col-xs-12 hc_block1_item">
                            <div class="hc_block1_docs">
                                <div class="hc_block1_iconlist">
                                    <img class="hc_block1_icon" src="/images/aboutus/block1-icon4.png" alt="">
                                    <img class="hc_block1_icon_on" src="/images/aboutus/block1-icon4-on.png" alt="">
                                </div>
                                <h4>沉淀行业知识快速复制
                                </h4>
                                <p>创新的业务资产沉淀机制，交付的过程中沉淀大量标准化可复用的业务组件，可快速在多个项目间复用和灵活扩展</p>
                            </div>
                        </li>
                        <li class="col-md-4 col-xs-12 hc_block1_item">
                            <div class="hc_block1_docs">
                                <div class="hc_block1_iconlist">
                                    <img class="hc_block1_icon" src="/images/aboutus/block1-icon5.png" alt="">
                                    <img class="hc_block1_icon_on" src="/images/aboutus/block1-icon5-on.png" alt="">
                                </div>
                                <h4>支撑大型企业应用构建
                                </h4>
                                <p>完善的应用打包、部署、升级能力，高效的团队协同开发能力，大幅减少环境部署时间和成本，支撑大型企业级应用构建</p>
                            </div>
                        </li>
                        <li class="col-md-4 col-xs-12 hc_block1_item">
                            <div class="hc_block1_docs">
                                <div class="hc_block1_iconlist">
                                    <img class="hc_block1_icon" src="/images/aboutus/block1-icon6.png" alt="">
                                    <img class="hc_block1_icon_on" src="/images/aboutus/block1-icon6-on.png" alt="">
                                </div>
                                <h4>全面可信护航企业安全
                                </h4>
                                <p>安全可信的开发环境，可靠的隐私数据保护，严格认证的安全架构，为业务应用安全保驾护航</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="hc_block2">
            <img src="/images/aboutus/block2-bg.png" alt="">
            <div class="hc_block2_top">
                <h2 class="hc_block_title">八大平台特性，为企业数字化强力赋能</h2>
                <p class="hc_block_desc">帮助企业加快实现业务、运营、管理的创新节奏，快速适应商业环境变化</p>
            </div>
            <div class="hc_block2_slide">
                <div class="hd">
                    <ul class="hc_block2_navlist">
                        <li>
                            <div class="hc_block2_navitem navitem1">
                                <div class="hc_block2_docs">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon1.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg.png" alt="">
                                    <p class="block2_item_desc"> 深度赋能</p>
                                </div>
                                <div class="hc_block2_docs_on">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon1-on.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg-on.png" alt="">
                                    <p class="block2_item_desc"> 深度赋能</p>
                                </div>
                            </div>
                            <div class="hc_block2_bddocs">
                                <div class="hc_block2_bddocs_desc">
                                    深度赋能一站式搭建，助推企业数字化转型升级，不论企业大小、行业贵贱，你都可以拥有一套低代码开发平台EAP，丰富多样的模板，简单灵活的向导，助你轻松完成复杂业务应用。
                                </div>
                                <div class="hc_block2_bddocs_btn">
                                    <a href="javascript:;">
                                        申请试用
                                    </a>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="hc_block2_navitem navitem2 ">
                                <div class="hc_block2_docs">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon2.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg.png" alt="">
                                    <p class="block2_item_desc">低代码开发</p>
                                </div>
                                <div class="hc_block2_docs_on">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon2-on.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg-on.png" alt="">
                                    <p class="block2_item_desc">低代码开发</p>
                                </div>
                            </div>
                            <div class="hc_block2_bddocs">
                                <div class="hc_block2_bddocs_desc">低代码开发直观且强大的低代码设计工具。在设计器中创建和修改页面和视图、数据模型、工作流等无封集成。
                                </div>
                                <div class="hc_block2_bddocs_btn">
                                    <a href="javascript:;">
                                        申请试用
                                    </a>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="hc_block2_navitem navitem3">
                                <div class="hc_block2_docs">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon3.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg.png" alt="">
                                    <p class="block2_item_desc">自由开发</p>
                                </div>
                                <div class="hc_block2_docs_on">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon3-on.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg-on.png" alt="">
                                    <p class="block2_item_desc">自由开发</p>
                                </div>
                            </div>
                            <div class="hc_block2_bddocs">
                                <div class="hc_block2_bddocs_desc">
                                    以最大的自由度设计，从预定义视图、小部件和模板库中受益，以加快设计过程，可设计出Web应用、手机APP、小程序、网站、文档等多种应用。</div>
                                <div class="hc_block2_bddocs_btn">
                                    <a href="javascript:;">
                                        申请试用
                                    </a>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="hc_block2_navitem navitem4">
                                <div class="hc_block2_docs">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon4.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg.png" alt="">
                                    <p class="block2_item_desc">易用BPM</p>
                                </div>
                                <div class="hc_block2_docs_on">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon4-on.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg-on.png" alt="">
                                    <p class="block2_item_desc">易用BPM</p>
                                </div>
                            </div>
                            <div class="hc_block2_bddocs">
                                <div class="hc_block2_bddocs_desc">
                                    Web可视化流程设计器，功能完善的BPM工作流程系统,,集流程管理、设计、测试、运行、监控、分析等功能于一体。</div>
                                <div class="hc_block2_bddocs_btn">
                                    <a href="javascript:;">
                                        申请试用
                                    </a>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="hc_block2_navitem navitem5">
                                <div class="hc_block2_docs">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon5.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg.png" alt="">
                                    <p class="block2_item_desc">无缝集成</p>
                                </div>
                                <div class="hc_block2_docs_on">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon5-on.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg-on.png" alt="">
                                    <p class="block2_item_desc">无缝集成</p>
                                </div>
                            </div>
                            <div class="hc_block2_bddocs">
                                <div class="hc_block2_bddocs_desc">
                                    所见即所得的可视化设计工具，通过拖拽式自定义表单界面，快速实现移动业务数据与页面元件的数据绑定，一次开发多端同步生成，实现多屏多端融合，轻松实现全平台覆盖。</div>
                                <div class="hc_block2_bddocs_btn">
                                    <a href="javascript:;">
                                        申请试用
                                    </a>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="hc_block2_navitem navitem6">
                                <div class="hc_block2_docs">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon6.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg.png" alt="">
                                    <p class="block2_item_desc">智能报表</p>
                                </div>
                                <div class="hc_block2_docs_on">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon6-on.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg-on.png" alt="">
                                    <p class="block2_item_desc">智能报表</p>
                                </div>
                            </div>
                            <div class="hc_block2_bddocs">
                                <div class="hc_block2_bddocs_desc">
                                    以专业、简捷、灵活为目标，仅需简单的拖拽操作便可以设计出复杂的中国式报表、参数查询报表、填报报表、大屏看板等，轻松、快速搭建数据决策分析系统。</div>
                                <div class="hc_block2_bddocs_btn">
                                    <a href="javascript:;">
                                        申请试用
                                    </a>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="hc_block2_navitem navitem7">
                                <div class="hc_block2_docs">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon7.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg.png" alt="">
                                    <p class="block2_item_desc">市场丰富</p>
                                </div>
                                <div class="hc_block2_docs_on">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon7-on.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg-on.png" alt="">
                                    <p class="block2_item_desc">市场丰富</p>
                                </div>
                            </div>
                            <div class="hc_block2_bddocs">
                                <div class="hc_block2_bddocs_desc">
                                    丰富的工业应用、模板、组件、函数，可直接下载使用，也可在此基础上按需求快速配置开发，快速发布上线等。</div>
                                <div class="hc_block2_bddocs_btn">
                                    <a href="javascript:;">
                                        申请试用
                                    </a>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="hc_block2_navitem navitem8">
                                <div class="hc_block2_docs">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon8.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg.png" alt="">
                                    <p class="block2_item_desc">混合部署</p>
                                </div>
                                <div class="hc_block2_docs_on">
                                    <img class="block2_icon" src="/images/aboutus/block2-icon8-on.png" alt="">
                                    <img class="block2_iconbg" src="/images/aboutus/block2-iconbg-on.png" alt="">
                                    <p class="block2_item_desc">混合部署</p>
                                </div>
                            </div>
                            <div class="hc_block2_bddocs">
                                <div class="hc_block2_bddocs_desc">
                                    支持公共云、私有云和混合云多种部署形态，助力创新创业和数字化转型企业快速实现应用快速部署，云端运维能力。</div>
                                <div class="hc_block2_bddocs_btn">
                                    <a href="javascript:;">
                                        申请试用
                                    </a>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="bd">
                    <div class="">
                        <div class="hc_block2_bdbox">
                            <img class="hc_block2_bd_img" src="/images/aboutus/block2-1.png" alt="">

                        </div>
                    </div>

                    <div>
                        <div class="hc_block2_bdbox">
                            <img class="hc_block2_bd_img" src="/images/aboutus/block2-2.png" alt="">

                        </div>
                    </div>

                    <div>
                        <div class="hc_block2_bdbox">
                            <img class="hc_block2_bd_img" src="/images/aboutus/block2-3.png" alt="">

                        </div>
                    </div>

                    <div>
                        <div class="hc_block2_bdbox">
                            <img class="hc_block2_bd_img" src="/images/aboutus/block2-4.png" alt="">

                        </div>
                    </div>

                    <div>
                        <div class="hc_block2_bdbox">
                            <img class="hc_block2_bd_img" src="/images/aboutus/block2-5.png" alt="">

                        </div>
                    </div>

                    <div>
                        <div class="hc_block2_bdbox">
                            <img class="hc_block2_bd_img" src="/images/aboutus/block2-6.png" alt="">

                        </div>
                    </div>

                    <div>
                        <div class="hc_block2_bdbox">
                            <img class="hc_block2_bd_img" src="/images/aboutus/block2-7.png" alt="">

                        </div>
                    </div>

                    <div>
                        <div class="hc_block2_bdbox">
                            <img class="hc_block2_bd_img" src="/images/aboutus/block2-8.png" alt="">

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="hc_block3">
            <img src="/images/aboutus/block3-bg.png" alt="">
            <div class="hc_block3_top">
                <h2 class="hc_block_title">平台发展历程</h2>
                <p class="hc_block_desc">更了解行业的低代码开发平台，历经近20年的技术积累与架构升级</p>
            </div>
            <div class="hc_block3_main">
                <div class="hc_block3_box box1">
                    <h2 class="hc_block3_year">2003--2007</h2>
                    <div class="hc_block3_descset">
                        <div class="hc_block3_titlebox">
                            <img src="/images/aboutus/block3-title-bg.png" alt="">
                            <h4 class="hc_block3_title">起步</h4>
                        </div>
                        <ul class="hc_block3_list">
                            <li>Delphi</li>
                            <li>平台配置</li>
                            <li>C/S模式</li>
                            <li>表单、图形</li>
                            <li>工作流</li>
                        </ul>
                    </div>
                </div>
                <div class="hc_block3_box box2">
                    <h2 class="hc_block3_year">2008--2011</h2>
                    <div class="hc_block3_descset">
                        <div class="hc_block3_titlebox">
                            <img src="/images/aboutus/block3-title-bg.png" alt="">
                            <h4 class="hc_block3_title">发展</h4>
                        </div>
                        <ul class="hc_block3_list">
                            <li>Java</li>
                            <li>平台配置</li>
                            <li>B/S模式</li>
                            <li>C/S平台配置</li>
                            <li>表单、图形</li>
                            <li>Web界面模板</li>
                            <li>工作流</li>
                        </ul>
                    </div>
                </div>
                <div class="hc_block3_box box3">
                    <h2 class="hc_block3_year">2012--2014</h2>
                    <div class="hc_block3_descset">
                        <div class="hc_block3_titlebox">
                            <img src="/images/aboutus/block3-title-bg.png" alt="">
                            <h4 class="hc_block3_title">提升</h4>
                        </div>
                        <ul class="hc_block3_list">
                            <li>Java</li>
                            <li>平台配置</li>
                            <li>B/S模式</li>
                            <li>C/S平台配置</li>
                            <li>表单、图形</li>
                            <li>Web界面模板</li>
                            <li>工作流</li>
                            <li>统计报表</li>
                            <li>MES行业软件</li>
                        </ul>
                    </div>
                </div>
                <div class="hc_block3_box box4">
                    <h2 class="hc_block3_year">2015--2018</h2>
                    <div class="hc_block3_descset">
                        <div class="hc_block3_titlebox">
                            <img src="/images/aboutus/block3-title-bg.png" alt="">
                            <h4 class="hc_block3_title">崛起</h4>
                        </div>
                        <ul class="hc_block3_list">
                            <li>Java</li>
                            <li>平台配置</li>
                            <li>B/S模式</li>
                            <li>B/S在线开发</li>
                            <li>表单、图形</li>
                            <li>移动应用</li>
                            <li>工作流</li>
                            <li>统计报表</li>
                            <li>主数据管理</li>
                            <li>MES行业软件</li>
                            <li>矿业、制造行业</li>
                        </ul>
                    </div>
                </div>
                <div class="hc_block3_box box5">
                    <h2 class="hc_block3_year">2019--2020</h2>
                    <div class="hc_block3_descset">
                        <div class="hc_block3_titlebox">
                            <img src="/images/aboutus/block3-title-bg.png" alt="">
                            <h4 class="hc_block3_title">创新</h4>
                        </div>
                        <ul class="hc_block3_list fs15">
                            <li>Java</li>
                            <li>平台配置</li>
                            <li>B/S模式</li>
                            <li>B/S在线开发</li>
                            <li>开发者中心</li>
                            <li>开发者生态</li>
                            <li>微服务应用</li>
                            <li>表单、图形</li>
                            <li>移动应用</li>
                            <li>多终端应用</li>
                            <li>工作流</li>
                            <li>统计报表</li>
                            <li>主数据管理</li>
                            <li>即时通讯</li>
                            <li>MES行业软件</li>
                            <li>矿业、制造行业</li>
                            <li>纺织、锂电行业</li>
                        </ul>
                    </div>
                </div>
                <div class="hc_block3_box box6">
                    <h2 class="hc_block3_year">2021--2022</h2>
                    <div class="hc_block3_descset">
                        <div class="hc_block3_titlebox">
                            <img src="/images/aboutus/block3-title-bg.png" alt="">
                            <h4 class="hc_block3_title">突破</h4>
                        </div>
                        <ul class="hc_block3_list fs15">
                            <li>Java</li>
                            <li>平台配置</li>
                            <li>B/S模式</li>
                            <li>B/S在线开发</li>
                            <li>开发者中心</li>
                            <li>开发者生态</li>
                            <li>微服务应用</li>
                            <li>表单、图形</li>
                            <li>移动应用</li>
                            <li>多终端应用</li>
                            <li>工作流</li>
                            <li>统计报表</li>
                            <li>主数据管理</li>
                            <li>即时通讯</li>
                            <li>MES行业软件</li>
                            <li>矿业、制造行业</li>
                            <li>纺织、锂电行业</li>
                            <li>智能语音</li>
                            <li>人脸识别</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="hc_block4" style="background: url('/images/aboutus/block4-bg.png')no-repeat center/cover;">
            <div class="hc_block_ctn">
                <h2 class="hc_block_title">荣誉资质</h2>
                <p class="hc_block_desc">多年来持续深耕数字化，获得来自国家和各行各业的肯定</p>
            </div>
            <div class="hc_block4_main">
                <div class="hc_block4_ctn">
                    <ul class="hc_block4_list">
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-7.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-1.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-2.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-3.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-4.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-5.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-6.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-7.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-1.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-2.png" alt=""></li>
                        <li class="hc_block4_item"><img src="/images/aboutus/block4-3.png" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="hc-foot">
    </div>
</body>

<script>
    $(function () {
        $(".hc_block2_slide").slide({ titCell: ".hd>ul>li", delayTime: "2000", effect: "fold" });

        let index = 3
        let len = $(".hc_block4_item").size()
        clickChange(index)

        $(".hc_block4_item").each((i, item) => {
            $(item).find('img').on("click", function () {
                let i2 = i
                if (i < 2) {
                    index = len - 2
                    i2 = index - 1
                } else if (i > (len - 3)) {
                    index = 1
                    i2 = index + 1
                }
                clickChange(i2)
            })
        })

        function nextOne() {
            let num = index + 1
            if (num < 2) {
                index = len - 2
                num = index - 1
            } else if (num > (len - 3)) {
                index = 1
                num = index + 1
            }
            clickChange(num)
        }
        let timer = setInterval(() => {
            nextOne()
        }, 3000);

        $(".hc_block4_list").hover(
            function () {
                clearInterval(timer)
            },
            function () {
                timer = setInterval(() => {
                    nextOne()
                }, 3000);
            }
        )
        function clickChange(i) {

            // 清除全部样式
            $(".hc_block4_item").removeAttr("style")

            // 左边样式
            $($(".hc_block4_item")[i - 2]).css({
                "height": "165px",
                "left": 0,
                "z-index": 97,
                "opacity": 1,
                "pointer-events": "all",
            })
            $($(".hc_block4_item")[i - 1]).css({
                "height": "235px",
                "left": "140px",
                "z-index": 98,
                "opacity": 1,
                "pointer-events": "all",
            })
            // 中间样式
            $($(".hc_block4_item")[i]).css({
                "height": "100%",
                "top": "50%",
                "left": "50%",
                "transform": "translate(-50%, -50%)",
                "z-index": 99,
                "opacity": 1,
                "pointer-events": "all",
            })
            // 判断动画向左还是向右
            if (index > i) {
                $($(".hc_block4_item")[i]).css({
                    "left": "40%",
                    "height": "235px",
                })
                $($(".hc_block4_item")[i]).animate({ left: "50%", height: "100%" }).css("overflow", "visible")
            } else if (index < i) {
                $($(".hc_block4_item")[i]).css({
                    "left": "auto",
                    "right": "40%",
                    "height": "80%",
                    "transform": "translate(50%, -50%)",
                })
                $($(".hc_block4_item")[i]).animate({ right: "50%", height: "100%", }).css("overflow", "visible")
            }
            // 右边样式
            $($(".hc_block4_item")[i + 1]).css({
                "height": "235px",
                "right": "140px",
                "z-index": 98,
                "opacity": 1,
                "pointer-events": "all",
            })
            $($(".hc_block4_item")[i + 2]).css({
                "height": "165px",
                "right": 0,
                "z-index": 97,
                "opacity": 1,
                "pointer-events": "all",
            })
            index = i
        }

    });


</script>

</html>